/**
 * 头部窗口右侧下拉项
 **/

import React from 'react';
import { history } from 'umi';
import { NavTabAPI } from '@/components/NavTabs/type';
import { Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import styles from '../styles.less';
import { ItemType } from 'antd/lib/menu/hooks/useItems';

const NavTabExtraContent: React.FC<NavTabAPI.INavTabExtraContent> = ({
  dispatch,
  activeKey,
  tabsList,
  homePageRouterText,
}) => {
  const onMenuClick = (menuKey: string) => {
    if (menuKey === 'closeAll') {
      //关闭所有
      dispatch({
        type: 'navTab/closeAllState',
        payload: [],
      });
      // history.push('/welcome');
      history.push(homePageRouterText);
    }

    if (menuKey === 'closeCurrent') {
      //关闭当前页
      dispatch({
        type: 'navTab/closeCurrentWindow',
        payload: {
          activeKey,
        },
      });
      let newTabsList: any[] = tabsList?.filter((itemObj: any) => {
        return itemObj?.pathname != activeKey;
      });
      if (newTabsList && newTabsList?.length > 0) {
        // window.location.hash = newTabsList?.[newTabsList?.length - 1]?.locationProps?.pathname
        history.push({
          ...newTabsList?.[newTabsList?.length - 1]?.locationProps,
        });
      } else {
        // history.push('/welcome');
        history.push(homePageRouterText);
      }
    }

    if (menuKey === 'closeOther') {
      // if (activeKey === '/welcome') {
      if (activeKey === homePageRouterText) {
        dispatch({
          type: 'navTab/updateWindow',
          payload: [],
        });
      } else {
        //关闭其他页
        dispatch({
          type: 'navTab/closeOtherWindow',
          payload: {
            activeKey,
          },
        });
      }
    }
  };

  // 下拉菜单  V4.24.8
  const items: ItemType[] = [
    {
      label: (
        <span
          onClick={() => {
            onMenuClick('closeAll');
          }}
        >
          关闭所有页
        </span>
      ),
      key: 'closeAll',
    },
    {
      type: 'divider', // 菜单分割线
    },
    {
      label: (
        <span
          onClick={() => {
            onMenuClick('closeCurrent');
          }}
        >
          关闭当前页
        </span>
      ),
      key: 'closeCurrent',
    },
    {
      type: 'divider', // 菜单分割线
    },
    {
      label: (
        <span
          onClick={() => {
            onMenuClick('closeOther');
          }}
        >
          关闭其他页
        </span>
      ),
      key: 'closeOther',
    },
  ];

  return (
    <Dropdown menu={{ items }}>
      <div className={styles['nav-tabs-drop']}>
        <DownOutlined style={{ color: '#000', fontSize: 16 }} />
      </div>
    </Dropdown>
  );
};

export default NavTabExtraContent;
